<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo</title>
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="app-all">
            <div class="header">
                <div>-_-, 还有 {{list | filterNum}} 件事未完成</div>
                <input v-model="addToDo" @change="callAddToDo" @keydown.enter="callAddToDo" class="header-ipt"
                    type="text">
            </div>
            <div class="content">
                <div class="content-items" v-if="showList.length>0">
                    <div v-for="item in showList" :key="item.id" class="item" @dblclick="callInput(item,$event)">
                        <div class="item-left">
                            <input type="checkbox" :checked="item.isDone" @change="callChechBoxthis(item,$event)">
                            <span :class="item.isDone ? 'line':''">{{item.text}}</span>
                        </div>
                        <div class="item-right" @click.stop="callDelete(item,$event)">
                            X
                        </div>
                        <input class="item-input" @blur="handleBlur" @keydown.enter="handleBlur" v-model="item.text"
                            type="text">
                    </div>
                </div>
            </div>
            <div class="footer" @click.stop="callFooter">
                <div class="active" ref="all">全部</div>
                <div>已完成</div>
                <div>未完成</div>
            </div>
        </div>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        window.onload = function () {
            let vm = new Vue({
                el: "#app",
                data: {
                    num: 4,
                    addToDo: "",
                    active: null,
                    list: [
                        {
                            id: 1,
                            text: "我的",
                            isDone: true
                        },
                        {
                            id: 2,
                            text: "打豆豆",
                            isDone: false
                        },
                        {
                            id: 3,
                            text: "睡觉",
                            isDone: false
                        },
                        {
                            id: 4,
                            text: "吃饭",
                            isDone: false
                        }
                    ],
                    showList: []
                },
                watch: {
                    list: {
                        handler(newVal) {
                            localStorage.setItem("list", JSON.stringify(newVal));
                        },
                        deep: true
                    }
                },
                methods: {
                    handleBlur(e) {
                        e.target.style.zIndex = "-100";
                    },
                    callInput(item, e) {
                        try {
                            e.target.children[2].focus();
                            e.target.children[2].style.zIndex = "100";
                        } catch (err) { }
                    },
                    callDelete(item, e) {
                        let parent = e.target.parentNode;
                        parent.innerHTML = "";
                        parent.style.animation = "leave 0.1s linear forwards";
                        setTimeout(() => {
                            [].forEach.call(this.list, (obj, index) => {
                                if (obj.id == item.id) {
                                    this.list.splice(index, 1);
                                    sloveList.call(this, { target: this.active });
                                }
                            });
                        }, 100);
                    },
                    callAddToDo(e) {
                        if (this.addToDo) {
                            let cat = false;
                            try {
                                this.list.forEach(item => {
                                    if (item.text == this.addToDo) {
                                        cat = true;
                                        throw Error();
                                    }
                                });
                            } catch (err) { };
                            if (cat) return;
                            this.list.push({
                                id: new Date().getTime(),
                                text: this.addToDo,
                                isDone: false
                            });
                        }
                    },
                    callChechBoxthis(item, e) {
                        item.isDone = e.target.checked;
                        sloveList.call(this, { target: this.active });
                    },
                    callFooter(e) {
                        if (e.target.classList.value.indexOf("footer") != -1) return;
                        sloveList.call(this, e);
                        this.active = e.target;
                        resolveClass(e);
                        function resolveClass(e) {
                            let children = e.target.parentNode.children;
                            for (let i = 0; i < children.length; i++) {
                                if (children[i].classList.value == "active") {
                                    children[i].classList.remove("active");
                                    break;
                                }
                            }
                            e.target.classList.add("active");
                        }
                    }
                },
                filters: {
                    filterNum(list) {
                        let num = 0;
                        list.forEach(item => {
                            if (item.isDone == false) num++;
                        });
                        return num;
                    }
                },
                created() {
                    if (localStorage.getItem("list")) {
                        this.list = JSON.parse(localStorage.getItem("list"));
                    }
                    this.showList = this.list;
                },
                mounted() {
                    this.active = this.$refs.all;
                }
            });
            function sloveList(e) {
                let text = e.target.textContent;
                switch (text) {
                    case "全部":
                        this.showList = this.list;
                        break;
                    case "已完成":
                        this.showList = [];
                        this.list.forEach(item => {
                            if (item.isDone == true) this.showList.push(item);
                        });
                        break;
                    case "未完成":
                        this.showList = [];
                        this.list.forEach(item => {
                            if (item.isDone == false) this.showList.push(item);
                        });
                        break;
                }
            }
        }
    </script>
</body>

</html>